<template>
	<div id="order" class="container">
		<h3 class="title"><span />询盘分类列表</h3>
		<el-button
			type="primary"
			class="add"
			size="small"
			icon="el-icon-plus"
			style="margin-bottom: 15px"
			@click="goAdd"
			>添加</el-button
		>
		<BouncedDialog
			:title="id ? '编辑' : '添加'"
			:dialog-show.sync="dialogShow"
			width="50%"
			class="link"
		>
			<el-form
				ref="addForm"
				:model="addForm"
				:rules="rules"
				inline
				class="addForm"
				label-width="80px"
			>
				<el-form-item label="分类名称" prop="name">
					<el-input v-model="addForm.name" />
				</el-form-item>

				<div class="btn">
					<el-button @click="dialogShow = false">取 消</el-button>
					<el-button type="primary" @click="submit()">确 定</el-button>
				</div>
			</el-form>
		</BouncedDialog>
		<el-table
			:data="orderData"
			border
			stripe
			:header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }"
		>
			<el-table-column label="ID" prop="id" width="60px" />
			<el-table-column label="分类名称" prop="name" />
			<el-table-column label="配置时间" prop="update_time" />
			<el-table-column label="操作" width="150px" fixed="right">
				<template slot-scope="scope">
					<el-button class="edit" size="mini" @click="editor(scope.row)">编辑</el-button>
					<el-button class="dele" size="mini" @click="del(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- <el-pagination
      :current-page="page.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      :hide-on-single-page="page.total<page.size?true:false"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->
	</div>
</template>
<script>
import inquiryApi from '@/api/inquiry.js'
export default {
	data() {
		return {
			orderData: [], //
			dialogShow: false,
			addForm: {
				name: '',
			},
			rules: {
				name: [{ required: 'true', message: '请输入分类名称', trigger: 'blur' }],
			},
			searchForm: {
				title: '',
			},
			page: {
				total: 0,
				currentPage: 1,
				size: 10,
				pageSizes: [10, 20, 30, 40],
			}, // 分页器
			val: {},
			id: '',
		}
	},
	created() {
		this.getList()
	},
	mounted() {
		// this.getTikets()
	},
	updated() {},
	methods: {
		// 新增
		goAdd() {
			this.id = ''
			this.addForm = {}
			this.dialogShow = true
		},
		// 编辑
		editor(row) {
			this.id = row.id
			this.addForm = {
				name: row.name,
				id: row.id,
			}
			this.dialogShow = true
		},

		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					if (!this.addForm.id) {
						inquiryApi.inquiryCategorySave({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow = false
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					} else {
						inquiryApi.inquiryCategoryUpdate({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow = false
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				} else {
					this.$message.error('请填写必要信息')
				}
			})
		},

		// 查看模型字段列表
		// check(row) {
		//   this.$router.push({ name: 'modelField', query: { id: row.id }})
		// },
		// 删除
		del(row) {
			this.$confirm('此操作将永久删除该询盘信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					inquiryApi.inquiryCategoryDelete({ id: row.id }).then((res) => {
						if (res.code == 0) {
							this.$message.success('已删除')
							this.getList()
						} else {
							this.$message.error('删除失败')
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		// 询盘列表
		getList() {
			this.val.page = this.page.currentPage
			this.val.limit = this.page.size
			// this.val.title = this.searchForm.title
			inquiryApi.inquiryCategoryList(this.val).then((res) => {
				this.orderData = res.data
				this.page.total = res.count
			})
		},
		// 分页规格改变
		handleSizeChange(val) {
			this.page.size = val
			this.page.currentPage = 1
			this.getList()
		},
		// 分页点击
		handleCurrentChange(val) {
			this.page.currentPage = val
			this.getList()
		},
	},
}
</script>
<style lang="scss">
#order {
	.link {
		.el-select {
			width: 100%;
		}
	}
	.addForm .el-form-item__content {
		width: calc(100% - 80px);
	}
}
</style>
<style scoped lang="scss">
.el-table {
	margin-bottom: 20px;
}
.search {
	min-width: 1350px;
	background-color: #fff;
	padding: 35px 30px 20px;
	border-radius: 5px;
}
.el-form-item {
	width: 100%;
}
</style>
